import React from 'react'
import ReactDOM from 'react-dom';


export default function App() {

  return (
    <div class='app' onClick={
      ()=>{
        console.log('app被点击了')
      }
    }>
      APP
     <ChildA /> 
    </div>
   
  )
}


function ChildA(props){
  return ReactDOM.createPortal( <div className='child-a' onClick={
    ()=>{
      console.log('A被点击了')
    }
  }>
     ChildA
  <ChildB />

</div>,document.querySelector('.modal'))
}

function ChildB(props){
  return (
    <div onClick={
      (e)=>{
        console.log('B被点击了')
        e.stopPropagation()
      }
    }>
      ChildB
    </div>
  )
}